<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>工资管理 - 人力资源管理系统</title>
  <link rel="stylesheet" href="styles.css">
  <style>
    .search-form {
      background: #fff;
      border: 1px solid var(--border-color);
      border-radius: 4px;
      padding: 24px;
      margin-bottom: 16px;
    }

        .search-form-grid {      display: grid;      grid-template-columns: repeat(4, 1fr);      gap: 24px;    }

    .form-item {
      display: flex;
      align-items: center;
    }

    .form-label {
      font-size: 14px;
      color: var(--text-primary);
      margin-right: 8px;
      flex-shrink: 0;
      width: 70px;
      text-align: right;
    }

    .form-input, .form-select {
      flex: 1;
      height: 32px;
      padding: 0 12px;
      border: 1px solid var(--border-color);
      border-radius: 4px;
      font-size: 14px;
      background: #fff;
      width: calc(100% - 78px);
    }

    .search-buttons {
      display: flex;
      gap: 16px;
    }

    .action-buttons {
      margin-bottom: 16px;
      display: flex;
      gap: 12px;
    }
    
    /* 分页控件样式 */
    .pagination {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      margin-top: 16px;
      gap: 8px;
      border: 1px solid #ff4d4f;
      border-radius: 2px;
      display: inline-flex;
      float: right;
      margin-top: 20px;
      margin-bottom: 20px;
    }
    
    .pagination button {
      min-width: 32px;
      height: 32px;
      border: none;
      background: #fff;
      cursor: pointer;
      font-size: 14px;
      color: var(--text-primary);
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0;
      padding: 0 12px;
    }
    
    .pagination button.active {
      background: var(--primary-color);
      color: #fff;
    }
    
    .pagination button:not(.active):hover {
      color: var(--primary-color);
    }
    
    .pagination button:first-child, .pagination button:last-child {
      padding: 0 8px;
      background: #f5f5f5;
      color: #666;
      border-right: 1px solid #eee;
      border-left: 1px solid #eee;
    }
  </style>
</head>
<body>
  <div class="layout">
    <div class="sidebar" id="sidebar"></div>
    <div class="main">
      <div class="topbar">
        <div class="title">工资管理</div>
        <div class="user">
          <span>管理员</span>
          <img src="https://via.placeholder.com/32x32.png?text=U" alt="用户头像">
        </div>
      </div>
      <div class="content">
        <div class="search-form">
          <div class="search-form-grid">
            <div class="form-item">
              <label class="form-label">员工姓名</label>
              <input type="text" class="form-input" placeholder="请输入员工姓名">
            </div>
            <div class="form-item">
              <label class="form-label">派遣公司</label>
              <select class="form-select">
                <option value="">全部</option>
                <option value="1">智联人力资源</option>
                <option value="2">前程无忧外包服务</option>
              </select>
            </div>
            <div class="form-item">
              <label class="form-label">工资月份</label>
              <input type="month" class="form-input">
            </div>
            <div class="form-item search-buttons">
              <button type="button" class="btn btn-primary">搜索</button>
              <button type="button" class="btn btn-default">重置</button>
            </div>
          </div>
        </div>

        <div class="action-buttons">
          <button class="btn btn-primary">新增</button>
          <button class="btn btn-default">修改</button>
          <button class="btn btn-default">删除</button>
          <button class="btn btn-default">导入</button>
          <button class="btn btn-default">导出</button>
        </div>

        <div class="table-container">
          <table style="min-width: 1800px;">
            <thead class="sticky-header">
              <tr>
                <th width="5%">序号</th>
                <th width="8%">用户名称</th>
                <th width="10%">派遣公司</th>
                <th width="5%">出勤天数</th>
                <th width="6%">基本工资</th>
                <th width="6%">月度绩效</th>
                <th width="6%">预发绩效</th>
                <th width="6%">工龄补贴</th>
                <th width="6%">岗位补贴</th>
                <th width="6%">夜班补贴</th>
                <th width="6%">餐补</th>
                <th width="6%">保密补贴</th>
                <th width="8%">安全责任补贴</th>
                <th width="6%">兼职补贴</th>
                <th width="5%">培训补贴</th>
                <th width="5%">其他补贴</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>1</td>
                <td>艾薇儿</td>
                <td>智联人力资源</td>
                <td>25</td>
                <td>5000</td>
                <td>2000</td>
                <td>1000</td>
                <td>300</td>
                <td>500</td>
                <td>200</td>
                <td>300</td>
                <td>200</td>
                <td>200</td>
                <td>0</td>
                <td>100</td>
                <td>0</td>
              </tr>
              <tr>
                <td>2</td>
                <td>唐婧</td>
                <td>前程无忧外包服务</td>
                <td>25</td>
                <td>6000</td>
                <td>2500</td>
                <td>1200</td>
                <td>400</td>
                <td>600</td>
                <td>0</td>
                <td>300</td>
                <td>200</td>
                <td>200</td>
                <td>500</td>
                <td>200</td>
                <td>100</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="pagination">
          <button>上一页</button>
          <button class="active">1</button>
          <button>2</button>
          <button>3</button>
          <button>下一页</button>
        </div>
      </div>
    </div>
  </div>
  <script>
    // 动态加载 sidebar.html
    fetch('components/sidebar.html')
      .then(response => response.text())
      .then(html => {
        document.getElementById('sidebar').innerHTML = html;
      });
  </script>
</body>
</html>